<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="150px"
        :model="projectForm"
        style="padding: 30px 0;"
        :rules="subjectlevyFormRules"
        ref="projectForm"
      >
        <el-row>
          <el-col :span="22">
            <span style="float: left;color: red;margin: 11px -60px 0px 54px">*</span>
            <el-form-item class="form-item-release" label="规划文本 :">
              <el-upload
                class="upload-demo"
                ref="uploadrelated"
                action="string"
                :http-request="makeTxtFileUploadRequest"
                :on-preview="makeTxtFileHandlePreview"
                :on-remove="makeTxtFileHandleRemove"
                :file-list="fileTypeIds['规划编制文本']"
                :limit="1"
                :on-exceed="tipFileOne"
                :auto-upload="true">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="征求主题 :" prop="title">
              <el-input
                placeholder="请输入征求主题"
                v-model="projectForm.title"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item-release" label="征求意见部门 :" prop="supportDeptName">
              {{projectForm.supportDeptName}}
              <el-input v-model="projectForm.supportDeptName" placeholder="请输入征求意见部门"
                        style="display: none"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                       @click="clickLevyDept">征求意见部门
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="反馈截止日期 :" prop="endDate" style="float: left;">
              <div>
                <el-date-picker
                  style="width:320px"
                  v-model="projectForm.endDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :picker-options="expireTimeOption"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="相关说明 :" prop="content">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入相关说明"
                v-model="projectForm.content"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="相关材料">
              <el-upload
                class="upload-demo"
                ref="uploadrelated"
                action="string"
                :http-request="fileUploadRequest"
                :on-preview="fileHandlePreview"
                :on-remove="fileHandleRemove"
                :file-list="fileTypeIds['相关材料']"
                :auto-upload="true">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-submit" style="margin-bottom: 20px;">
        <el-button type="primary" :disabled="isDisabled" @click.stop="commitList()">发送</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailData"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailDialogVisible == false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <dept-check :visible="deptVisible" :miniType="'2'" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept"></dept-check>
  </basic-container>
</template>

<script>
  import {makeTxtAddOpinion} from "@/api/opinion";
  import fileTypeMixin from "@/mixins/fileTypeMixin";

  export default {
    name: "opinionCollection",
    mixins: [fileTypeMixin],
    created() {
      this.projectForm.relateId = this.$route.params.id;
      this.projectForm.type = this.$route.query.type;
      this.type = this.$route.query.type;
      this.title = this.$route.query.title;
      this.projectForm.title =this.$route.query.orgName+ '关于征求《' + this.$route.query.title + '（征求意见稿）》意见的函';
    },
    data() {
      return {
        headerData: {
          title: ' 规划编制-意见征求添加'
        },
        subjectlevyFormRules: {
          supportDeptName: [
            {required: true, message: "请输入征求意见部门", trigger: "blur"}
          ],
          title: [
            {required: true, message: "请输入征求主题", trigger: "blur"}
          ],
          endDate: [
            {required: true, message: "请输入反馈截止日期", trigger: "blur"}
          ],
        },// 表单验证
        projectForm: {
          supportDeptName:'',
          title: '',
          endDate: '',
          content: '',
          fileIds:[],
          deptIds:null,
        },
        deptVisible: false,//协同部门树弹窗标志
        fileType: '相关材料',
        title: '',//对应类型名称
        detailDialogVisible: false,
        updateTxtDialogVisible: false,//上传规划文本标志
        updataTextFlag: false,//是否上传规划文本
        detailTxtDialogVisible: false,// 规划文本详情弹框标志
        detailData: [],
        type: '',
        isDisabled: false,
        expireTimeOption: {
          disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return date.getTime() <= Date.now();
          }
        },
      }
    },
    methods: {
      // 弹出征集部门弹框
      clickLevyDept() {
        this.deptVisible = true
      },
      cancelSupportDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getCheckInfo(deptIds, deptNames) {
        this.projectForm.supportDeptName = deptNames;
        this.projectForm.deptIds = deptIds.split(",");
        this.deptVisible = false;
      },
      goBack() {
        this.$router.go(-1);
      },
      commitList() {

        this.projectForm.makeTxtFileId = this.getFileId(this.fileTypeIds['规划编制文本']);
        if(this.projectForm.makeTxtFileId==''){
          this.$notify({
            title: '提示',
            message: '请上传规划文本',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        this.$refs.projectForm.validate(valid => {
          if (valid) {
            this.$confirm("确定发送意见征求吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.projectForm.achievementId = this.$route.params.id;
              this.projectForm.fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.isDisabled = true;
              makeTxtAddOpinion(this.projectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "发送成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            });
            this.isDisabled = false;
          } else {
            this.isDisabled = false;
          }
        })
      },

      makeTxtFileUploadRequest(file) {
        this.fileUploadRequestName(file, '规划编制文本')
      },
      makeTxtFileHandlePreview(file) {
        this.fileHandlePreviewName(file, '规划编制文本')
      },
      makeTxtFileHandleRemove(file) {
        this.fileHandleRemoveName(file, '规划编制文本')
      },
      // 上传规划文本上传之后事件
      closeDialog() {
        this.updateTxtDialogVisible = false
      },
      closeDetailDialog() {
        this.detailTxtDialogVisible = false
      },
      // 查看上传的规划文本
      viewTxt() {
        this.detailTxtDialogVisible = true
      },
    },
  }
</script>

<style lang="scss" scoped>

</style>



